import './App.css';
import { useState } from 'react';

function App() {

  // useState 响应式数据,其中生命的count必须使用setCount进行修改;
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setCount(count + 1);
  }
  const handleReset = (val) => {
    setCount(val);
  }

  const [nameData, setName] = useState({ name: '孙悟空' })
  const handleClickName = () => {
    setName({ ...nameData, name: '齐天大圣' })
  }
  const handleResetName = (val) => {
    setName({ ...nameData, name: val })
  }

  return (
    <div className="App">
      <button onClick={handleClick}>点击新增{count}</button>
      <button style={{ marginLeft: '10px' }} onClick={() => handleReset(0)}>重置</button>
      <button style={{ marginLeft: '10px' }} onClick={handleClickName}>修改名字{nameData.name}</button>
      <button style={{ marginLeft: '10px' }} onClick={() => handleResetName('孙悟空')}>重置</button>
    </div>
  );
}

export default App;
